<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" href="layui/css/modules/layer/default/layer.css" />
		<title>首页</title>
		<style>
		    html, body {
		      position: relative;
		      height: 100%;
		    }
		    body {
		      background: #eee;
		      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		      font-size: 14px;
		      color:#000;
		      margin: 0;
		      padding: 0;
		    }
		    .swiper-container {
		      width: 100%;
		      height: 100%;
		    }
		    .swiper-slide {
		      text-align: center;
		      font-size: 18px;
		      background: #fff;
		
		      /* Center slide text vertically */
		      display: -webkit-box;
		      display: -ms-flexbox;
		      display: -webkit-flex;
		      display: flex;
		      -webkit-box-pack: center;
		      -ms-flex-pack: center;
		      -webkit-justify-content: center;
		      justify-content: center;
		      -webkit-box-align: center;
		      -ms-flex-align: center;
		      -webkit-align-items: center;
		      align-items: center;
		    }
		</style>		
	</head>
	<body>	
		<header>
			<div class="main">
				<img src="img/logo.png" class="logo"/>
				<div class="fr fot txtFFF">欢迎来到bluPilot  请    <a class="txtFFF pl_15 pr_15" href="#" onclick="show()">登录</a><a class="txtFFF pl_15 pr_15" href="#">注册</a></div>
			</div>
		</header>		
		<div class="main ys">
			<div class="bb">
				<div class="fl item0 itembox">用户管理</div>
				<div class="fl item1 itembox">开发者数量统计</div>
				<div class="fl item2 itembox">应用统计</div>
				<div class="fl item3 itembox">定位数据统计</div>
				<div class="clearboth"></div>
			</div>
			<div class="myitem0 hide">
				1
			</div>
			<div class="myitem1 hide">
				2
			</div>
			<div class="myitem2 hide">
				3
			</div>
			<div class="myitem3 hide">
				4
			</div>			
		</div>
		<footer>
			<p class="txt9A9">Copyright© 2018 Sogou.com. All Rights Reserved.</p>
			<p class="txt9A9">本站发布的所有内容,未经许可,不得转载,详见《知识产权声明》《用户使用协议》</p>
		</footer>	
	</body>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
	<script type="text/javascript" src="layui/lay/modules/layer.js" ></script>
  	<script>
    	var swiper = new Swiper('.swiper-container');
  	</script>
  	<script>
  		$(".itembox").click(function(){
  			var index = $(this).index();
  			$(".itembox").removeClass("active");
  			$(this).addClass("active");
  			for(var i = 0;i<4;i++){
  				if(i==index){
  					$(".myitem"+index).removeClass("hide");
  				}else{
  					$(".myitem"+i).addClass("hide");
  				}
  			}
  		});
  	</script>
</html>
